<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>nepadmin</title>
    <link rel="stylesheet"
          th:href="@{/web/layui/css/layui.css}">
    <link rel="stylesheet"  th:href="@{/web/css/admin.css}">
    <link rel="stylesheet" href="css/l-style.css" th:href="@{/web/css/l-style.css}"/>
    <script type="text/javascript" src="js/echarts.js" th:src="@{/web/js/echarts.js}"></script>
    <!--[if IE 8]>
    <link rel="stylesheet" href="css/l-style_8.css" th:href="@{/web/css/l-style_8.css}"/>
    <![endif]-->
</head>

<body>

<!-- 主体内容 -->
<div class="layui-fluid dang_fluid" id="VIEW-index" lay-title="首页">
    <div class="row_a clear mT12">
        <div class="row_a_l">
            <div class="item_box">
                <div class="item_head">
                    <h3 class="item_tit">内存使用情况</h3>
                    <div class="item_h_r">
                        <!--<select class="select_a">
                            <option>最近10天</option>
                            <option>最近1月</option>
                            <option>最近1年</option>
                        </select>
                        <button class="table_but table_but_a but_a">全 部</button>-->
                    </div>
                </div>
                <div class="item_main" id="heap">

                    <div class="tubiao">
                        <div class="pie_bg_m">
                            <i class="i-bg"></i>
                            <div id="EC-2" style="width:100%;height:266px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row_a_r">
            <div class="item_box">
                <div class="item_head">
                    <h3 class="item_tit">内存使用情况</h3>
                    <div class="item_h_r">
                        <!--<select class="select_a">
                            <option>最近10天</option>
                            <option>最近1月</option>
                            <option>最近1年</option>
                        </select>
                        <button class="table_but table_but_a but_a">全 部</button>-->
                    </div>
                </div>
                <div class="item_main" id="nonheap">

                    <div class="tubiao">
                        <div class="pie_bg_m">
                            <i class="i-bg"></i>
                            <div id="EC-3" style="width:100%;height:266px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="row_a clear">
        <div class="row_a_l">
            <div class="item_box">
                <div class="item_head">
                    <h3 class="item_tit">服务器连通性</h3>
                    <a href="#" class="item_more">更多></a>
                </div>
                <div class="item_main">
                    <table class="table_a" cellpadding="0" cellspacing="0">
                        <tr>
                            <th>序号</th>
                            <th>服务器IP地址</th>
                            <th>测试地址</th>
                            <th>状态</th>
                        </tr>
                        <tr class="tr_b">
                            <td>1</td>
                            <td>党政外网</td>
                            <td>http://192.168.4.112/rdmanager/main/index.jhtml</td>
                            <td>
                                <img src="images/icon_zhuangt_1.png"/>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>党政外网</td>
                            <td>http://192.168.4.112/rdmanager/main/index.jhtml</td>
                            <td>
                                <img src="images/icon_zhuangt_2.png"/>
                            </td>
                        </tr>
                        <tr class="tr_b">
                            <td>3</td>
                            <td>党政外网</td>
                            <td>http://192.168.4.112/rdmanager/main/index.jhtml</td>
                            <td>
                                <img src="images/icon_zhuangt_1.png"/>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>党政外网</td>
                            <td>http://192.168.4.112/rdmanager/main/index.jhtml</td>
                            <td>
                                <img src="images/icon_zhuangt_1.png"/>
                            </td>
                        </tr>
                        <tr class="tr_b">
                            <td>5</td>
                            <td>党政外网</td>
                            <td>http://192.168.4.112/rdmanager/main/index.jhtml</td>
                            <td>
                                <img src="images/icon_zhuangt_2.png"/>
                            </td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>党政外网</td>
                            <td>http://192.168.4.112/rdmanager/main/index.jhtml</td>
                            <td>
                                <img src="images/icon_zhuangt_1.png"/>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="row_a_r">
            <div class="item_box">
                <div class="item_head">
                    <h3 class="item_tit">速度监控</h3>
                    <div class="item_h_r">
                        <select class="select_a">
                            <option>最近10天</option>
                            <option>最近1月</option>
                            <option>最近1年</option>
                        </select>
                        <button class="table_but table_but_a but_a">全 部</button>
                    </div>
                </div>
                <div class="item_main">
                    <div class="tubiao">
                        <div class="pie_bg_m">
                            <i class="i-bg"></i>
                            <div id="EC-1" style="width:100%;height:265px;">
                            </div>
                            <script type="text/javascript">
                                // 基于准备好的dom，初始化echarts实例
                                var myChart1 = echarts.init(document.getElementById('EC-1'));

                                // 指定图表的配置项和数据

                                var option = {
                                    title: {
                                        text: '监控时间：2018年12月07日 ',
                                        textStyle: {
                                            color: '#666',
                                            fontSize: 12,
                                            fontWeight: '100',
                                        },
                                        top: 10,
                                        left: 5
                                    },
                                    tooltip: {
                                        show: true,
                                        trigger: 'item',
                                    },
                                    grid: {
                                        left: 80,
                                        right: 35,
                                        bottom: 25
                                    },
                                    xAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            interval: 0,
                                            color: ['#666'],
                                            formatter: '{value}ms'
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: '#4997c5',
                                            },
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        splitArea: {
                                            show: true,
                                            areaStyle: {
                                                color: ['#ecfafe', '#fff']
                                            }
                                        },
                                        splitLine: {
                                            lineStyle: {
                                                color: ['#d8f2f9'],
                                            }
                                        },
                                        splitNumber: 8,
                                    },
                                    yAxis: {
                                        type: 'category',
                                        axisLabel: {
                                            interval: 0,
                                            color: ['#666']
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: '#4997c5',
                                            },
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        data: ['公文搜索', '发布公文', '系统首页', '公文搜索', '系统登录页']
                                    },
                                    series: [{
                                        data: [130, 190, 154, 66, 78],
                                        type: 'bar',
                                        barWidth: 18,
                                        itemStyle: {
                                            normal: {
                                                //barBorderRadius: 15,
                                                color: '#43aed4'
                                            }
                                        }
                                    }]
                                };

                                // 使用刚指定的配置项和数据显示图表。
                                myChart1.setOption(option);
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js" th:src="@{/web/js/jquery.min.js}"></script>
<!--<script src="layui/layui.js" th:src="@{/web/layui/layui.js}"></script>-->
<script src="layui/layui.all.js" th:src="@{/web/layui/layui.all.js}"></script>
<script type="text/javascript" src="js/l-index.js" th:src="@{/web/js/l-index.js}"></script>
<script>
    //由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
    !function () {
        var layer = layui.layer,
            form = layui.form;
        form.on('checkbox(layTableAllChoose)', function (data) {
            $("input[name='layTableCheckbox']").each(function () {
                this.checked = data.elem.checked;
                // console.log(data);
            });
            form.render('checkbox');
        });
        window.onresize = function () {
            myChart1.resize();
            myChart2.resize();
        }
    }();
</script>
<script type="text/javascript">
    let size = [0, 0, 0, 0];
    let used = [0, 0, 0, 0];
    let arr = [0, 0, 0, 0];
    let nonsize = [0, 0, 0, 0];
    let nonused = [0, 0, 0, 0];
    let nonarr = [0, 0, 0, 0];
    let heap = function () {
        $.ajax({
            url: "http://localhost:8080/main/data",
            dataType: "json",
            success(data) {
                // 基于准备好的dom，初始化echarts实例
                let d = new Date();
                let time4 = date(0);
                arr.push(time4);
                nonarr.push(time4);
                arr.shift();
                size.shift();
                used.shift();
                nonarr.shift();
                nonsize.shift();
                nonused.shift();
                used.push(data.UsedMemory);
                size.push(data.totalMemory);
                nonused.push(data.nonUsedMemory);
                nonsize.push(data.nontotalMemory);
                myChart2.setOption({
                    xAxis: {
                        data: arr
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: 'SIZE',
                        data: size
                    }, {
                        // 根据名字对应到相应的系列
                        name: 'USED',
                        data: used
                    }]
                })
                myChart3.setOption({
                    xAxis: {
                        data: nonarr
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: 'SIZE',
                        data: nonsize
                    }, {
                        // 根据名字对应到相应的系列
                        name: 'USED',
                        data: nonused
                    }]
                })

            },
            error(data) {
            }
        })
    };

    var myChart2 = echarts.init(document.getElementById('EC-2'));
    var myChart3 = echarts.init(document.getElementById('EC-3'));
    // 指定图表的配置项和数据
    var option = {
        color: ['#FFE479', '#4DB0F1'],
        tooltip: {
            show: true,
            trigger: 'axis',
            showContent: false,
        },
        grid: {
            left: 50,
            right: 35,
            bottom: 25
        },
        legend: {
            left: 100,
            top: 20,
            align: 'right',
            itemGap: 150,
            itemWidth: 10,
            data: [{
                name: 'SIZE',
                icon: 'circle',
            }, {
                name: 'USED',
                icon: 'circle',
            }],
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                interval: 0,
                color: ['#666']
            },
            axisLine: {
                lineStyle: {
                    color: '#4997c5',
                },
            },
            axisTick: {
                show: false
            },
            data: []
        }],
        yAxis: {
            type: 'value',
            axisLabel: {
                interval: 0,
                color: ['#666']
            },
            axisLine: {
                lineStyle: {
                    color: '#4997c5',
                },
            },
            axisTick: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['#ecfafe', '#fff']
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#d8f2f9'],
                }
            },
        },
        series: [ {
            name: 'SIZE',
            type: 'line',
            symbolSize: 0,
            areaStyle: {
                normal: {
                    type: 'default',
                    color: '#FFE479',
                    opacity: 1,
                }
            },
            smooth: true,
            lineStyle: {
                color: '#FFE479',
                width: 0,
            },
            symbol: 'pin',
            symbolSize: 91,
            symbolOffset: [0, 0],
            showSymbol: false,
            smooth: true,
            label: {
                show: true,
                color: '#fff',
                formatter: 'size\n{c}MB',
                position: 'top',
                distance: -40,
            },
            data: []
        },{
            name: 'USED',
            type: 'line',
            symbolSize: 0,
            areaStyle: {
                normal: {
                    type: 'default',
                    color: '#4DB0F1',
                    opacity: 1,
                }
            },
            symbol: 'pin',
            symbolSize: 90,
            symbolOffset: [0, 0],
            showSymbol: false,
            smooth: true,
            lineStyle: {
                color: '#fff',
                width: 0,
            },
            label: {
                show: true,
                color: '#fff',
                formatter: 'used\n{c}MB',
                position: 'top',
                distance: -40,
            },
            data: []
        }]
    };
    var option3 = {
        color: ['#4DB0F1', '#71dcde'],
        tooltip: {
            show: true,
            trigger: 'axis',
            showContent: false,
        },
        grid: {
            left: 50,
            right: 35,
            bottom: 25
        },
        legend: {
            left: 100,
            top: 20,
            align: 'right',
            itemGap: 150,
            itemWidth: 10,
            data: [{
                name: 'NONUSED',
                icon: 'circle',
            }, {
                name: 'NONSIZE',
                icon: 'circle',
            }],
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                interval: 0,
                color: ['#666']
            },
            axisLine: {
                lineStyle: {
                    color: '#4997c5',
                },
            },
            axisTick: {
                show: false
            },
            data: []
        }],
        yAxis: {
            type: 'value',
            axisLabel: {
                interval: 0,
                color: ['#666']
            },
            axisLine: {
                lineStyle: {
                    color: '#4997c5',
                },
            },
            axisTick: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['#ecfafe', '#fff']
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#d8f2f9'],
                }
            },
        },
        series: [{
            name: 'NONSIZE',
            type: 'line',
            symbolSize: 0,
            areaStyle: {
                normal: {
                    type: 'default',
                    color: '#FFE479',
                    opacity: 1,
                }
            },
            smooth: true,
            lineStyle: {
                color: '#4DB0F1',
                width: 0,
            },
            symbol: 'pin',
            symbolSize: 91,
            symbolOffset: [0, 0],
            showSymbol: false,
            smooth: true,
            lineStyle: {
                color: '#4DB0F1',
                width: 0,
            },
            label: {
                show: true,
                color: '#fff',
                formatter: 'size\n{c}MB',
                position: 'top',
                distance: -40,
            },
            data: []
        }, {
            name: 'NONUSED',
            type: 'line',
            symbolSize: 0,
            areaStyle: {
                normal: {
                    type: 'default',
                    color: '#4DB0F1',
                    opacity: 1,
                }
            },
            symbol: 'pin',
            symbolSize: 90,
            symbolOffset: [0, 0],
            showSymbol: false,
            smooth: true,
            lineStyle: {
                color: '#4DB0F1',
                width: 0,
            },
            label: {
                show: true,
                color: '#4DB0F1',
                formatter: 'used\n{c}MB',
                position: 'top',
                distance: -40,
            },
            data: []
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option);
    myChart3.setOption(option3);
    window.setInterval(heap, 5000);
    let date = function dateTransfer(mill) {
        let d = new Date();
        let h = d.getHours();
        let m = d.getMinutes();
        let s = d.getSeconds();
        if (s - mill < 0) {
            s = 60 - mill;
            if (m - 1 < 0) {
                m = 60 - m;
                if (h - 1 < 0) {
                    h = 12 - 1;
                } else if (h - 1 >= 0 && h - 1 < 10) {
                    h = "0" + h;
                } else {
                    h = h - 1;
                }
            } else if (m - 1 >= 0 && m - 1 < 10) {
                m = "0" + m;
            } else {
                m = m - 1;
            }
        } else if (s - mill < 10 && mill >= 0) {
            s = "0" + s
        }
        return h + ":" + m + ":" + s;
    }
</script>
</body>
<!--<script src="js/ie8hack/html5shiv.min.js" th:src="@{/web/js/ie8hack/html5shiv.min.js}"></script>-->
<!--<script src="js/ie8hack/respond.min.js" th:src="@{/web/js/ie8hack/respond.min.js}"></script>-->
<!--<script src="js/ie8hack/placeholders.min.js" th:src="@{/web/js/ie8hack/placeholders.min.js}"></script>-->
</html>